<template>
  <div class="content">
      <header>
        <img src="../../assets/life/banner3.png" alt="">
        <div class="title" @click="goService">
          <i class="iconfont icon-zuojiantou" style="font-size:1rem;"></i>
        </div>
      </header>
      <div style="margin-top:10px">
      <p>日常保洁</p>
      <span class="tag">提供家庭室内表面清洁，物品归纳整理和高温消毒服务</span>
      </div>
      <hr>
      <p>服务价格</p>
      <div class="price">
          <div class="left" style="display:flex;flex-direction: column;">
              <span>日常保洁</span>
              <span>2小时起</span>
          </div>
          <div class="right">35/小时</div>
      </div>
      <hr>
      <p>参考耗时</p>
      <div class="price">
          <div class="left">一居</div>
          <div class="right">2~3小时</div>
      </div>
      <hr>
      <div class="price">
          <div class="left">二居</div>
          <div class="right">3~4小时</div>
      </div>
      <div class="footer">
      <van-button color="#409aff">单次预约</van-button>
      <van-button color="#ff5555">周期预约</van-button>
      </div>
  </div>
</template>

<script>
export default {
     methods:{
       goService(){
         this.$router.push({path: "/service"})
       }
     }
}
</script>

<style lang="less" scoped>
body{
    background: #e6e6e6;
}
hr{
  color:#d6d6d6
}
header{
  width: 100%;
//   height: 446px;
  position: relative;
  img{
    width: 100%;
    height: 100%;
  }
  
  .title{
    width: 10%;
    position: fixed;
    top: 0.6rem;
    left: 5px;
    opacity: 0.6;
    i{
        color: #ffffff;
    }
  }
}
.tag{
      font-size: 13px;
      color: #000000;
      opacity: 0.7;
      padding-left: 20px;
  }
p{
    margin: 0;
    font-size: 18px;
    color: #4f4f4f;
    padding-left: 20px;
}
.price{
    display: flex;
    justify-content: space-between;
    padding: 0px 20px 10px 20px;
    height: 110px;
    .left{
        color: #8e8e8e;
        font-size: 13px;
        height: 100%;
        line-height: 110px;
        p{margin: 0;}
        span{
            height: 30%;
        }
    }
    .right{
        font-size: 13px;
        color: #686868;
        height: 100%;
        line-height: 110px;
    }
}
.footer{
    width: 100%;
    height: 102px;
    .van-button{
        width: 50%;
        height: 100%;
    }
}

</style>